* {
    margin: 0;
    padding: 0;
}

a{
    color:black;
}

#progressBar{
    position: fixed;
    top:0;
    left:0;
    height: 5px;
    width: 0%;
    background-color: rgba(0,0,0,0.7);
}

#logo{
    font-size: 60px;
    font-weight: lighter;
    width:200px;
    text-align: center;
    margin: 40px auto;
    cursor:pointer;
}

#searchBar{
    max-width: 480px;
    width:90%;
    margin: 0 auto;
}

#searchInput{
    width:calc(100% - 89px);
    height:21px;
    font-size: 14px;
    border-color: black;
}

#searchButton{
    width:80px;
    height:25px;
    color:white;
    background-color: black;
    border:none;
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px;
 }

#resourcesList{
    width:100%;
    max-width:1100px;
    margin: 40px auto 0;
    font-size: 14px;
}

#resourcesListGrid{
    display: grid;
    grid-template-columns: 60px 100px 1fr 80px 120px 120px;
    grid-template-rows: 40px;
    grid-auto-rows:60px;
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
}

.listItem{
    white-space : nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable{
    cursor: pointer;
}

.title{
    min-width: 200px;
    max-width: 660px;
}

.multilineInGrid{
    width: 100%;
    display: block;
    white-space : nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textCenter{
    text-align: center;
}

.listTitle{
    font-weight: bold;
    grid-row: 1 / 2;
}

.orderable:hover{
    cursor:pointer;
}
.sortedAsc:after{
    content: "▲";
}

.sortedDesc:after{
    content: "▼";
}
.category{
    grid-column: 1 / 2;
}

.from{
    grid-column: 2 / 3;
}

.title{
    grid-column: 3 / 4;
    justify-self: start;
}

.resourceName{
    color:#666666;
}

.title.listTitle{
    justify-self: center;
    text-align: center;
}

.size{
    grid-column: 4 / 5;
}

.path{
    grid-column: 5/6;
}

.magnet:before{
    content:"";
    background-image: url("../image/magnet.svg");
    background-size: 13px 13px;
    display: inline-block;
    width:13px;
    height:13px;
    margin-right: 5px;
}

.ftp:before{
    content:"";
    background-image: url("../image/ftp.svg");
    background-size: 13px 13px;
    display: inline-block;
    width:13px;
    height:13px;
    margin-right: 5px;
}

.publisher{
    grid-column: 6/7;
}

.online{
    color:green;
}
.offline{
    color:grey;
}

.deleted{
    text-decoration:line-through;
}

#footer{
    margin-top: 60px;
    width: 100%;
}

#sitesList{
    min-width: 140px;
    max-width: 572px;
    margin: 0 auto;
}

.site{
    display: inline-block;
    width:140px;
    text-align: center;
}

#joinUs{
    width: 100px;
    text-align: center;
    margin: 20px auto;
}